<template>
	<view>
		<view class="container">
			<view class="date">
				<text>{{date}}</text>
			</view>
			<view class="voice">
				<image class="voiceIcon" src="../../static/logo.png" mode=""></image>
			</view>
			<view class="title">
				<view class="user">
					<text>{{identity}}&nbsp;&nbsp;{{userName}}</text>
				</view>
				<view class="type">
					<text>{{msgType}}&nbsp;&nbsp;{{time}}</text>
				</view>

			</view>

			<view class="msg">
				<text>{{msg}}</text>
			</view>
			<view class="send" @click="sendMassage()">
				<image class="sendImg" src="../../static/logo.png" mode=""></image>
			</view>
			<view class="sendText">
				<text>回复信息</text>
			</view>

		</view>

	</view>
</template>

<script>
	import vm from '../../utils/events.js'
	export default {
		data() {
			return {
				date: this.$p.getNowTimeDate(),
				identity: '子女',
				userName: '张强',
				msgType: '家庭号消息' + ' ',
				time: '08:35:15',
				msg: '晒大红色动能暗杀死哦电话赛欧的哈斯偶的哈斯的阿斯顿湖南'
			};
		},
		methods: {
			getReadMsg() {
				vm.$on("readMsg", value => {
					console.log(value)
				})
			},
			sendMassage(){
				let data = {
					massage:false,
					massageRead:false,
					massageSend:true
				}
				this.$emit('fmassageSend', data);
			}
		}
	}
</script>

<style>
	.container {
		width: 90%;
		height: 75vh;
		position: relative;
		top: -8vh;
		margin: 0 auto;
		background-color: #ffffff;
		/* border: 1rpx solid #000000; */
		border: 1px solid #bfbfbf;
		box-shadow: 0 0 10px 2px #bdcee0;
		border-radius: 3vw;
	}

	.date {
		width: 40vw;
		height: 5vh;
		float: left;
		margin: 2vh 0 0 5vw;
		color: #BF4E12;
	}

	.voice {
		width: 100rpx;
		height: 100rpx;
		float: right;
		margin: 2vh 5vw 0 0;
		border-radius: 50%;
		overflow: hidden;
	}

	.voiceIcon {
		max-width: 100%;
		max-height: 100%;
	}

	.title,
	.type {
		font-size: 48rpx;
		font-weight: bold;
		float: left;
		margin: 2vh 0 0 5vw;

	}

	.title {
		width: 40vw;
		height: 5vh;
	}

	.type {
		width: 70vw;
		height: 5vh;
	}

	.msg {
		width: 80%;
		height: 25vh;
		font-size: 48rpx;
		display: flex;
		justify-content: left;
		margin: 0 auto;
		position: relative;
		top: 10vh;
		letter-spacing: 10rpx;
		line-height: 80rpx;
		overflow-y: scroll;
	}

	.send {
		width: 120rpx;
		height: 120rpx;
		border-radius: 1vh;
		overflow: hidden;
		margin: 0 auto;
		position: relative;
		top: 15vh;
	}

	.sendImg {
		max-width: 100%;
		max-height: 100%;
	}

	.sendText {		
		font-weight: bold;
		margin: 0 auto;
		position: relative;
		top: 18vh;
		left: 12vw;
		width: 50%;
		height: 5vh;
	}
</style>
